<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<link rel="stylesheet" href="css/simple.css" />
<title>备忘</title>
</head>
<body>
  <div class="box">
    <!-----项目问题------><!-----项目问题------>
    <div class="independent_block" id="project">
      <div class="small_block">
        <p class="project_name">云店商铺</p>
        <div class="bgf">
          <ul class="list_style_ul_02">
            <li>
              <p class="fz18">边框参与布局</p>
              <div class="fz16">
                1.给内部元素定义高度，不要外围的高度固定<br />
                2.利用margin取负值，给需要边框的元素取负值，时期多余的边框隐藏<br />
                3.代码的重用性，如width,height,color,不要给每个类固定<br />
                4.banner图 不要用背景，不便更改 <br />
                5.ie的透明效果 filter：aplha(opacity=0-100);ie的透明背景<br />
                6.opacity = 0-1; 元素范围内的透明度<br />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-----问题------><!-----问题------>
    <div class="independent_block" id='question'>
      <a href="javascript:;" class="theTitle">问题</a>
      <div class="fz18">
        svg <br />
        树节点的遍历<br />
        深克隆<br />
        俄罗斯方块
      </div>
    </div>
    <!-----css------><!-----css------>
    <div class="independent_block" id="css">
      <a href="javascript:;" class='theTitle'>生疏css</a>
      <pre>
        .mh740 { 
          min-height: 500px;
          /* sets min-height for IE */
        _height:expression(this.scrollHeight < 740 ? "740px" : "auto");
        }

        .max_width{
          max-width:600px;
          /*sets max-width for IE */
          _width:expression(document.body.clientWidth > 600 ? "600px" : "auto");
        }
        
        .mh600 { 
          min-height: 400px;
          height: auto !important;
          height: 400px;
        }

      </pre>
      <div class="">
        <p class="fz20 ti2em">css</p>
        <pre>
          -webkit-tap-highlight-color : transparent;
          -webkit-text-size-adjust : 100%;
          border-collapse:collapse / separate;  表格边框合并 / 分离
      </pre>
      </div>
      
      <div class="">
        <p class="fz20 ti2em">ie   hack</p>
        <pre>
          &lt;!--[if !IE]>&lt;!--> 除IE外都可识别 &lt;!--&lt;![endif]-->
          &lt;!--[if IE]> 所有的IE可识别 &lt;![endif]-->
          &lt;!--[if IE 6]> 仅IE6可识别 &lt;![endif]-->
          &lt;!--[if lt IE 6]> IE6以及IE6以下版本可识别 &lt;![endif]-->
          &lt;!--[if gte IE 6]> IE6以及IE6以上版本可识别 &lt;![endif]-->
          &lt;!--[if IE 7]> 仅IE7可识别 &lt;![endif]-->
          &lt;!--[if lt IE 7]> IE7以及IE7以下版本可识别 &lt;![endif]-->
          &lt;!--[if gte IE 7]> IE7以及IE7以上版本可识别 &lt;![endif]-->
          &lt;!--[if IE 8]> 仅IE8可识别 &lt;![endif]-->
          &lt;!--[if IE 9]> 仅IE9可识别 &lt;![endif]-->
        </pre>
      </div>

    </div>
    <!-----javascript------><!-----javascript------>
    <div class="independent_block" id='javascript'>
      <a href="javascript:;" class="theTitle">生疏javascript,单词</a>
      <div class="">
        <p class="fz20">
          滚动距离的浏览器兼容<br>
          window.pageYOffset 兼容ie.chrome,firefox <br>
          document.documentElement.scrollTop 兼容ie/firefox <br>
          document.body.scrollTop  兼容chrome

        </p>
        <p class="fz20">bind,call,apply三者的区别</p>
        <p class="">
          1.bind,call,apply三者都是改变函数this对象的指向<br />
          2.call传入的参数是枚举出来传入的<br />
          3.apply传入的参数是以一个数组的形式传入的<br />
          4.call,apply改变函数的this对象指向的同事并且立即执行函数<br />
          5.bind改变this指向时会创建一个新的函数并改了this指向，调用时正常的传入参数
        </p>
        <pre>
            call apply

            var arr = [2,10,23,5,1,12];
            var max = Math.max.call(Math,2,10,23,1,12);
            var max = Math.max.apply(Math,arr)


            bind
            var test = {
              _int : 10
            }
            var fn = {
              _int : 2,
              fun : function(){
                document.querySelector(".box").onclick=(function(){conssole.log(this._int)}).bind(test)
              }
            }
            fun.fun();   //  10
        </pre>
        <pre>
        
          js 判断是否是质数
          function fn(input) {
              input = parseInt(input, 10);
              return isPrime(input) ? 'is prime' : 'not prime';
          }

          function isPrime(input) {
              if (input < 2) {
                  return false;
              } else {
                  for (var i = 2; i <= Math.sqrt(input); i++) {
                      if (input % i == 0) {
                          return false;
                      }
                  }
              }
              return true;
          }
        </pre>
      </div>
      <p class="fz16">
        document.compatMode <br />
        CSS1compat 标准模式<br />
        BackCompat 混杂模式<br /><br />
        document.readyState <br />
        complete 完成 <br />
        loading  加载中
      </p>
      <pre>
        join()  将数组按特定的符号拼接成字符串
        split() 将字符串按特定的符号转化成数组
      </pre>
      <pre class="fz18">
        unicode码 转换

        string.charCodeAt();  编码
        String.fromCharCode(); 反码

        URI编码
        encodeURI("www.淘宝.com");   // "www.%E6%B7%98%E5%AE%9D.com"
        encodeURIComponent("www.淘宝.com");   //把字符窜作为URI组件进行编码
      </pre>
      <pre>
      一
        function shit6(m, n) {
          return (f => f(f))(g => (m, n) => m === 1 ? [n] : g(g)(m - 1, n).concat(n))(m, n)
        }
        undefined
        var arr = shit6(6,2);
        undefined
        arr
        [2, 2, 2, 2, 2, 2]

      二
        function a(n, m) {
          return Array.apply(null, Array(n)).map(() => m);
        }
      
      百度：

      =>是es6语法中的arrow function
      举例：
      (x) => x + 6

      相当于

      function(x){
          return x + 6;
      }
      </pre>
      <hr />
      <pre>
        window对象属性
          navigator : 航海家
          plugins : 插件

        window.navigator.plugins

        obj instanceof Object/Array/RegExp   得到数据的类型

        Object.prototype.toString.call( obj )  // 返回数据的类型 [Object String] / [Object Object] / [Object Array] 等等

        Array.prototype.slice.call(arguments);  // slipt()

        indexOf('')  // window.navigator.appVerison.indexOf('MSI') > -1  表示存在

        alert();
        confirm();弹出确认框
        prompt();弹出浏览器输入框
      </pre>

      <pre>
        getBoundingClientRect() 元素距离页面边的距离
        getBoundingClientRect().top
        getBoundingClientRect().right
      </pre>

      <pre>
        implementation   : 实现，履行，安装启用
        feature   ：hasFeature
        document.implementation.hasFeature() //验证DOM的功能
      </pre>
    </div>
    <!-----jquery------><!-----jquery------>
    <div class="independent_block" id='jquery'>

      <a href="javascript:;" class="theTitle">jquery</a>
      <div class="">
        <p class="fz18 ti2em">closest()方法;</p>
        <p class="fz18">closest()方法获得匹配选择器的第一个祖先元素，从当前的元素开始沿DOM数向上。与parents()方法很像，但存在一点差异</p>
        <p class="ti2em">closest():从当前元素开始，向上遍历，直到找到已应用选择器的零个，一个匹配为止</p>
        <p class="ti2em">parents():从父元素开始，向上遍历，找到一个或者多个</p>
        <pre>
          //closest()完成事件委派，当接近列表元素或其子代元素被点击时
          $(document).bind("click",function(e){
            $(e.target).closest('li').toggleClass('hilight');
          })
          //父元素变红
          &lt;ul>
            &lt;li class="item-a">A&lt;/li>
            &lt;li class="item-b">B&lt;/li>
          &lt;/ul>
          $("li.item-a").closest('ul').css({'background':'red'});
        </pre>
      </div>
      <div class="">
        <p class="fz18 ti2em">serialize();方法通过序列化表单值创建URL编码文本字符串。</p>
        <pre>
        &lt;form id="form_01" action=''>
          姓名：&lt;input name='name' type='text'>&lt;br>
          年龄：&lt;input name='age' type='text'>&lt;br>
        &lt;/form>
        &lt;button id='serialize'>序列化表单值&lt;/button>
        &lt;script>
          $("#serialize").click(function(){
            var urlSearch = $("#form_01").serialize();
            console.log(urlSearch);
          });
        &lt;/script>
        </pre>
        
      </div>
    </div>
    <!-----单词------><!-----单词------>
    <div class="independent_block" id='word'>
      <a href="javascript:;" class="theTitle">单词</a>
      <div class="fz18">
        compat 兼容<br />
        traverse 穿过<br />
        tetris 俄罗斯方块<br />
        anchor 锚点<br>
        iterator 迭代<br>
        implementation 实现<br>
        traversal 遍历<br>
      </div>
    </div>
    <!-----链接------><!-----链接------>
    <div class="independent_block" id='links'>
      <a href="javascript:;" class="theTitle">链接</a>
      <div class="fz18">
        各种抽奖效果  http://sc.chinaz.com/tag_jiaoben/choujiang_2.html <br />
        http://www.cnblogs.com/Wayou/p/3543577.html 刘哇勇 html5
      </div>
    </div>
    
    <!-----密码------><!-----密码------>
    <div class="independent_block" id='password'>
      <a href="javascript:;" class="theTitle">密码</a>
      <div class="fz18">
        开源中国  手机号  密码 ... <br />
      </div>
    </div>

    <div class="skipAnchor">
      <a href="#project" class='anchor'>工作中问题</a>
      <a href="#question" class='anchor'>问题</a>
      <a href="#css" class='anchor'>css</a>
      <a href="#javascript" class='anchor'>javascript</a>
      <a href="#jquery" class='anchor'>jQuery</a>
      <a href="#word" class='anchor'>单词</a>
      <a href="#links" class='anchor'>各种链接</a>
      <a href="#password" class='anchor'>密码提示</a>
    </div>
  </div><!--box-->
</body>
</html>
